<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解决方案</title>
		<link rel="stylesheet" href="iconfont/iconfont.css">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
		<link rel="stylesheet" type="text/css" href="css/solu.css" />
		<style>
			#template {
				display: none;
			}
			
		</style> 
	</head>
	<body>
		<header>
			<div class="top">
				<div class="top_con">
					<img src="img/logo.png" />
					<ul class="top_r">
						<li class="icon_first">
							<span class="iconfont icon-dianhua"></span>
							<i>0503-60652189</i>
						</li>
						<li>
							<span class="iconfont icon-qq"></span>
						</li>
						<li>
							<span class="iconfont icon-wb"></span>
						</li>
						<li>
							<span class="iconfont icon-weixin"></span>
						</li>
						<li>
							<span class="iconfont icon-youxiang"></span>
						</li>
					</ul>
					<ul class="top_c">
						<li><a href="index.html">网站首页</a></li>
						<li><a href="#">传悦资源</a></li>
						<li><a href="exam.html">传悦案例</a></li>
						<li><a href="#">传悦服务</a></li>
						<li  style="background-color: #dd4012;color: #ffffff;"><a href="solu.html">解决方案</a></li>
						<li><a href="#">需求提交</a></li>
					</ul>
				</div>
			</div>
		</header>
		<div class="banner">
			<div class="banner_b">
				<div class="banner_b_con">
					<span>网站首页</span>
					<span>></span>
					<span>传悦观点</span>
				</div>
			</div>
		</div>
		<ul class="soluList">
			<li id="template">
				<a href="soludetails.html">
				<div class="soluList_l">
					<p class="year_m"></p>
					<p class="date"></p>
				</div>
				<div class="soluList_r">
					<img src="" class="soluList_img" />
					<h3 class="soluList_title"></h3>
					<h4>标签：<span class="soluList_type"></span></h4>
					<p class="soluList_text"></p>
				</div>
				<img class="newimg" src="" />
				</a>
			</li>
		</ul>
		<div class="btnbox">
			<span>&lt;</span> 
			<span>1</span>
			<span style="background-color: #dd4012; color: #FFFFFF;">2</span>
			<span>3</span>
			<span>4</span>
			<span>&gt;</span>
		</div>
		<footer>
			<div class="bottom">
				<div class="logo_min">
					<img src="img/logo-min.png">
				</div>
				<div class="bot_right">
					<ul class="b_r">
						<li>
							<a href="#">关于传悦</a>
						</li>
						<li>
							<a href="#">新闻动态</a>
						</li>
						<li>
							<a href="#">传悦观点</a>
						</li>
						<li>
							<a href="#">联系传悦</a>
						</li>
						<li>
							<a href="#">加入传悦</a>
						</li>
						<li>
							<a href="#">付款账户</a>
						</li>
					</ul>
					<div class="b_l">
						<span>Copyright&copy;2013</span>
						<span>创梦网络科技有限责任公司</span>
						<span>||</span>
						<span>传悦 Chnyoo.cn All Rights Reserved</span>
						<span>京ICP备12005221号</span>
					</div>
				</div>
			</div>
		</footer>
	</body>
</html>
<script src="jquery.min.js"></script>
<script>
	$.ajax({
		url:"http://127.0.0.1:8080/soluList",
		success:function(data){
			JSON.parse(data).forEach(function(item,index){
				let newItem=$("#template").clone(true);
				newItem.attr("id","");
				newItem.find(".year_m").html(item.date.substring(0,7));
				newItem.find(".date").html(item.date.substring(8,10));
				newItem.find(".soluList_img").attr("src",item.img);
				newItem.find(".soluList_title").html(item.title);
				newItem.find(".soluList_type").html(item.type);
				newItem.find(".soluList_text").html(item.text);
				if(index===0){
					newItem.find(".newimg").attr("src","img/new.png");
				}
				newItem.find("a").attr("href",`${newItem.find("a").attr("href")}?id=${item.id}`)
				newItem.appendTo($(".soluList"));
			})
		}
	})
</script>